<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
	</head>
	<style type="text/css">
		.mui-bar{
			height: 45px;
		}
		.mui-content{
			height: 100%;
			padding-top:46px !important;
			overflow: hidden;
		}
		.mui-scroll{
			margin-bottom: 110px;
		}
		.my-h{
			height: 55px;
         	white-space:normal;
         	word-break:break-all;
         	word-wrap:break-word; 
		}
		.my-f-red{
			color:red;
		}
		.mui-table-view-cell{
			padding-right:15px !important;
		}
		.content-left .mui-table-view-cell:after{
			height: 0px;
		}
		.my-f-red{
			color:red;
		}
		.my-t-r{
			text-align: right;
		}
		.my-t-c{
			text-align: center;
		}
		.my-numbox{
			height: 30px;
			padding: 0px;
			width: 100px;
			font-weight: normal;
		}
		.my-numbox input{
			width: 40 !important;
		}
		.my-numbox button{
			padding: 0px !important;
			margin: 0px !important;
			width: 30px !important;
		}
		.my-checkbox{
			height: 50px;
    		margin-top: 15px;
		}
		.my-bottom{
			height: 110px;
			background-color: #FFFFFF;
		}
		.my-bottom-row{
			margin-top: 10px !important;
			line-height: 40px !important;
			border-bottom: 1px solid #EEEEEE;
		}
		.my-bottom-row-left{
			height: 60px;
			line-height: 60px;
		}
		.my-bottom-btn{
			background-color:#5bcad5;
			color: #ffffff;
		}
		.my-bottom-btn a{
			color: #ffffff;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">结账</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll">
			    <!--数据列表-->
			    <ul class="mui-table-view mui-table-view-chevron" id="shoppingList">
			    	<!--<li class="mui-table-view-cell">
			            <div class="mui-row">
			            	<div class="mui-col-sm-2 mui-col-xs-2">
			            		<div class="mui-input-row mui-checkbox my-checkbox">
								  	<label></label>
								  	<input name="checkbox1" value="Item 1" type="checkbox">
								</div>
			            	</div>
			            	<div class="mui-col-sm-3 mui-col-xs-3">
			            		<img src="images/iconfont-tianjia.png" width="70" max-height="100" />
			            	</div>
			            	<div class="mui-col-sm-7 mui-col-xs-7">
			            		<div class="mui-col-sm-12 mui-col-xs-12 my-h">qqqqqqqqqqqqqqqqqqqqqqqqqq21211qqqqqqqqq</div>
			            		<div class="mui-row">
			            			<div class="mui-col-sm-6 mui-col-xs-6 my-f-red">111</div>
			            			<div class="mui-col-sm-6 mui-col-xs-6">			            				
			            				<div class="mui-numbox my-numbox">
										  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
										  <input class="mui-numbox-input" type="number" />
										  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
										</div>
			            			</div>
			            		</div>
			            	</div>
			           </div>
			        </li>-->
			    </ul>			   
		</div>
		<nav class="mui-bar mui-bar-tab my-bottom">
			<div class="mui-row my-bottom-row">
				<div class="mui-col-sm-4 mui-col-xs-4">
					<div class="mui-input-row mui-checkbox mui-left">
					  	<label>全选</label>
					  	<input name="checkbox" id="checkAll" class="checkAll" value="two" type="checkbox" checked>
					</div>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					共<span id="my_goods_num">0</span>件商品 
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					小计：<span id="my_sum">0</span>元
				</div>
			</div>
			<div class="mui-row my-bottom-row-left">
				<div class="mui-col-sm-9 mui-col-xs-9 my-t-r" style="padding-right: 10px;">
					合计：<span id="my_sum_Two">0</span>
				</div>
				<a class="mui-col-sm-3 mui-col-xs-3 my-t-c my-bottom-btn" href="#picture">
					结账(<span id="my_goods_num_two">0</span>)
				</a>
			</div>
		</nav>
 

            <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" id="doneBtn">
                        <a href="jacascript:void(0)">扫码支付</a>
                    </li>
                </ul>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#picture"><b>取消</b></a>
                    </li>
                </ul>
            </div>
		<script src="js/mui.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/GetQrCode.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script>jQuery.noConflict()</script>
		<script type="text/javascript">		
			mui.init({
				beforeback: function(){
					//获得列表界面的webview
					var list = plus.webview.getWebviewById('goods');
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list,'refreshHtml');
					//返回true，继续页面关闭逻辑
					return true;
				}
			});
			function checkboxOnclick(t){
				var obj = document.getElementsByName("checkbox");
				var listBox = mui('.checkAll');
				var goods_sn = t.id.split("_")[0] + '_' + t.id.split("_")[1]
				var jian = goods_sn + "_jian";
                var jia = goods_sn + "_jia";
				if(document.getElementById(goods_sn + "_checkbox").checked){
                    jQuery("#" + jian).removeClass("mui-disabled");
                    jQuery("#" + jia).removeClass("mui-disabled");
				}else{
					jQuery("#" + jian).addClass("mui-disabled");
                    jQuery("#" + jia).addClass("mui-disabled");					
				}
				listBox.each(function() {
                    var ele = this;
                    ele.checked=false;
                })
			    var arry = [];
			    var goods_sn = [];
			    for(k in obj){
			        if(obj[k].checked){
			        	arry.push(obj[k].value);
			        	goods_sn.push(obj[k].id.split("_")[0] +"_"+obj[k].id.split("_")[1]);
			        }
			    }
			    getQrCode.getShopping(goods_sn);
			    for(i in arry){
			    	if(arry[i].val != "two"){
			    		
			        }
			    }
			}
			mui.plusReady(function(){
				var user_id = localStorage.getItem("telMember");//获取
				var state = app.getState();
				mui('#shoppingList').on('tap','.my-goods-jian',function(){
					var id = this.getAttribute('id');
					var goods_sn = id.split("_")[0] +'_'+ id.split("_")[1];
					var rec_id = jQuery("#" + goods_sn +"_rec_id").val();
					var numId = goods_sn + "_input"; 
					var numtt = jQuery("#"+numId).val();
					var data = getQrCode.updategoods(rec_id,numtt,state);
					if(data.status.succeed == 1){
						getQrCode.updateHtml(data.data.goods_list);
						
					}else{
						mui.toast(data.status.error_desc,{ duration:'long', type:'div' });
					};

				});
				mui('#shoppingList').on('change','.my-goods-input',function(){
					var recId =this.id.split("_")[0] + "_" + this.id.split("_")[1]+"_rec_id"; 
					var rec_id = jQuery("#" + recId).val();
					if(this.value == 0){
						jQuery("#" + this.id).val("1");
						var btnArray = ['是', '否'];
						mui.confirm('是否要删除该商品，确认？', '提示信息', btnArray, function(e) {
		                    if (e.index == 1) {
								location.reload();
		                    } else {
		                    	var data = getQrCode.deletegoods(rec_id,state);
		                    	if(data.status.succeed == 1){
									getQrCode.updateHtml(data.data.goods_list);
									location.reload();
								}else{
									mui.toast(data.status.error_desc,{ duration:'long', type:'div' });
								};
		                    }
		                })
						mui('.mui-numbox').numbox();
					}
				});
				mui('#shoppingList').on('tap','.my-goods-jia',function(){
					var id = this.getAttribute('id');
					var goods_sn = id.split("_")[0] +'_'+ id.split("_")[1];
					var data = getQrCode.addgoods(goods_sn,1,state);
					//console.log("jia" + JSON.stringify(data));
					if(data.status.succeed == 1){
						getQrCode.updateHtml(data.data.goods_list);
					}else{
						mui.toast(data.status.error_desc,{ duration:'long', type:'div' });
					}
				});
				document.getElementById('doneBtn').addEventListener('tap',function(e) {
					var obj = document.getElementsByName("checkbox");
				    var arry = [];
				    for(k in obj){
				        if(obj[k].checked){
				        	if(obj[k].value != "two"){
				        		var t = obj[k].value.split("_")[2];
				        		arry.push(parseInt(t));
				        	}
				        }
				    }
					if (jQuery(":checkbox[name=checkbox]:checked").size() == 0) {
						mui(".mui-popover").popover("toggle");
						window.setTimeout(function(){
		           		 	mui.toast('请选择至少一个商品进行结账!',{ duration:'long', type:'div' });
		                },500);
						return false;
					}
				    getQrCode.setOrder(state,arry);
				})
				document.getElementById('checkAll').addEventListener('change',function(e) {
		            var listBox = mui('.listCheckBox');
		            var goods_sn = [];
		            var id = document.getElementsByName('checkbox');
		            var value = new Array();
		            if (e.target.checked) {
		                listBox.each(function() {
		                    var ele = this;
		                    ele.checked=true;
		                })
		            } else {
		                listBox.each(function() {
		                    var ele = this;
		                    ele.checked=false;                  
		                })
		            }
		            for(var i = 0; i < id.length; i++){
			     		if(id[i].value != 'two'){
			     			value.push(id[i].id.split("_")[0] + "_" + id[i].id.split("_")[1]);
			     		}
				    } 
	                getQrCode.getShopping(value);
		        })
				mui.ajax({
					headers: {
						"device-udid":headers.device_udid,
					    "device-client":headers.device_client,
					    "device-code":headers.device_code,
					    "api-version":headers.api_version,
					},
					type:'POST',
					url: publicUrl +"/sites/api/?url=admin/flow/checkOrder",
					dataType:"json",
					data:{
						"token":state.token,
						"user":{
	                       "user_id":user_id,
	                    }
					},
					success:function(data){
						if(data.status.succeed == 1){
							var html=""
							for(var i=0; i<data.data.goods_list.length; i++){
								var goods_data = data.data.goods_list;
								html += '<li class="mui-table-view-cell" id="'+goods_data[i].goods_sn+'_myli">'
								            +'<div class="mui-row">'
								            	+'<div class="mui-col-sm-2 mui-col-xs-2">'
								            		+'<div class="mui-input-row mui-checkbox my-checkbox">'
													  	+'<label></label>'
													  	+'<input name="checkbox" id="'+goods_data[i].goods_sn+'_checkbox" onclick="checkboxOnclick(this)" value="'+goods_data[i].subtotal+'_'+goods_data[i].goods_number+'_'+goods_data[i].rec_id+'" type="checkbox" class="listCheckBox" checked>'
													+'</div>'
								            	+'</div>'
								            	+'<div class="mui-col-sm-3 mui-col-xs-3">'
								            		+'<img src="'+goods_data[i].img.thumb+'" width="70" max-height="100" />'
								            	+'</div>'
								            	+'<div class="mui-col-sm-7 mui-col-xs-7">'
								            		+'<div class="mui-col-sm-12 mui-col-xs-12 my-h">'+goods_data[i].goods_name+'</div>'
								            		+'<div class="mui-row">'
								            			+'<div class="mui-col-sm-6 mui-col-xs-6 my-f-red"><span id="'+goods_data[i].goods_sn+'_span" >'+goods_data[i].formated_goods_price+'</span></div>'
								            			+'<div class="mui-col-sm-6 mui-col-xs-6">'			            				
								            				+'<div class="mui-numbox my-numbox"  data-numbox-min="0">'
															  +'<button class="mui-btn mui-numbox-btn-minus my-goods-jian" id="'+goods_data[i].goods_sn+'_jian" type="button">-</button>'
															  +'<input class="mui-numbox-input my-goods-input" type="number" id="'+goods_data[i].goods_sn+'_input" value="'+goods_data[i].goods_number+'"/><input type="hidden" id="'+goods_data[i].goods_sn+'_rec_id" value="'+goods_data[i].rec_id+'"/><input type="hidden" id="'+goods_data[i].goods_sn+'_goods_price" value="'+goods_data[i].goods_price+'"/>'
															  +'<button class="mui-btn mui-numbox-btn-plus my-goods-jia" id="'+goods_data[i].goods_sn+'_jia" type="button">+</button>'
															+'</div>'
								            			+'</div>'
								            		+'</div>'
								            	+'</div>'
								           +'</div>'
								       	+'</li>'
							}
							jQuery("#shoppingList").html(html);
							mui('.mui-numbox').numbox();
							getQrCode.updateHtml(goods_data);
						}else{
							mui.toast(data.status.error_desc,{ duration:'long', type:'div' });
						}
					}
				})
			})
		</script>
	</body>
</html>
